<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页面</title>
</head>
<script>
    function init() {
        document.querySelector(".level1Ol").addEventListener("click", (event) => {
            console.log(event.target);
            let object = event.target;
            if (object.classList.value == "level1Li" && object.nextElementSibling != null && object.nextElementSibling.tagName.toLowerCase() != "li") {
                object.nextElementSibling.toggleAttribute("hidden");
            }
        }, false);
    }
    window.addEventListener("load", init, false);
</script>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }
    
    .mainPage {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 40px auto;
        grid-template-areas: "header header" "left main";
        height: 100%;
    }
    
    .top {
        grid-area: header;
        background-color: #5ba4fb;
        box-shadow: #5ba4fb 0px 2px 2px;
    }
    
    .menu {
        grid-area: left;
        background-color: #eef5ff;
        box-shadow: #eef5ff 2px -3px 2px;
    }
    
    .menu ol {
        padding-left: 0px;
    }
    
    ol>li {
        list-style: none;
    }
    
    li>a {
        text-decoration: none;
        color: black;
    }
    
    .level1Ol {
        text-align: center;
    }
    
    .level1Li {
        height: 35px;
        margin: 1px 5px;
        line-height: 35px;
        background-color: #5ba4fb;
        color: white;
        cursor: pointer;
    }
    
    .level2Li {
        margin: 1px 5px 0px 5px;
        background-color: #8ecaea;
    }
    
    .main {
        grid-area: main;
    }
    
    iframe {
        margin: 0;
        width: 100%;
        height: 99%;
        border: 0;
    }
</style>

<body>
    <section class="mainPage">
        <nav class="top"></nav>
        <aside class="menu">
            <ol class="level1Ol">
                <li class="level1Li">用户权限管理模块</li>
                <ol class="level2Ol">
                    <li class="level2Li"><a href="userManager.html" target="mainPage">用户信息管理</a></li>
                    <li class="level2Li"><a href="roleManager.html" target="mainPage">角色信息管理</a></li>
                    <li class="level2Li">权限信息管理</li>
                </ol>
                <li class="level1Li">邮件模块</li>
                <ol class="level2Ol">
                    <li class="level2Li">写邮件</li>
                    <li class="level2Li">收邮件</li>
                </ol>
                <li class="level1Li">流程管理模块</li>
                <li class="level1Li">信息发布管理模块</li>
            </ol>
        </aside>
        <article class="main">
            <iframe name="mainPage" src="./welcome.html"></iframe>
        </article>
    </section>
</body>

</html>